<template>
    <div id=push>
        
        <!-- 商品列表显示 -->
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="proName"
                label="商品名称"
                width="180">
            </el-table-column>
            <el-table-column  label="商品详情">
                <template slot-scope="scope">
                    <el-popover placement="top-start" title="" trigger="hover">
                    <img :src="scope.row.picUrl" alt="" style="width: 150px;height: 150px">
                    <img slot="reference" :src="scope.row.picUrl" style="width: 30px;height: 30px">
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                prop="proAdress"
                label="地址"
                width="180">
            </el-table-column>
            <el-table-column
                prop="bought"
                label="买过">
            </el-table-column>
            <el-table-column
                prop="isDelete"
                label="是否删除" :formatter="isdel">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleReset(scope.row.proId)">还原</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currIndex"
            :page-sizes="[3, 6, 9, 12]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
            </el-pagination>
        </div>

    </div>
  </template>

 <script>
    export default {
      data() {
        return {
          tableData: [], //定义数据属性
            count: 0,
            currIndex: 1,
            pageSize: 3
        }
      },
        // 组件被创建时间处理
        created:function(){
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/Product/Indexs",
                    {params:{pageIndex:this.currIndex, //传递的参数
                             pageSize:this.pageSize}})
                .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
        },
        methods: {
            //是否删除
            isdel: function(row,column,cellValue,index){
                if(row.isDelete == 1){
                    return '未删除'
                }else if(row.isDelete == 2){
                    return '已删除'
                }
            },
            //分页条数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/Product/Indexs",
                    {params:{pageIndex:this.currIndex, //传递的参数
                             pageSize:val}})
                .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
            },
            //分页页数
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/Product/Indexs",
                    {params:{pageIndex:val, //传递的参数
                             pageSize:this.pageSize}})
                .then((res) => {this.tableData = res.data.data; this.count = res.data.count});
            },
            //还原
            handleReset(a){
                if(!confirm("确认加入回收站吗？")){
                    return;
                }
                this.axios
                    .post('https://localhost:44324/api/Product/Reset?id='+a)
                    .then((res) => {
                        if (res.data.code > 0) {
                            this.$message({
                                type: 'success',
                                message: '还原成功!'
                            });
                            this.$router.push("/Product");
                        } else {
                            this.$message({
                            type: 'info',
                            message: '已取消还原'
                            })
                        }
                    })
            }
            
        }
    }
  </script>
